<template>
  <div class="login">
    <div class="box">
      <h1>酒店信息管理系统</h1>
      <el-form
        ref="loginFormRef"
        size="small"
        :model="loginForm"
        :rules="rules"
        status-icon
        label-width="40px"
      >
        <el-form-item label="账号" prop="username">
          <el-input v-model="loginForm.username" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="loginForm.password" type="password" />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm(loginFormRef)"> 登录 </el-button>
          <el-button @click="resetForm(loginFormRef)">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { $Login } from '@/api/login'
import { ElNotification } from 'element-plus'
import type { IResponse } from '@/types/response'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/store/user'
import { $GetUserinfo } from '@/api/user'

const loginFormRef = ref<FormInstance>()

interface LoginForm {
  username: string
  password: string
}

const loginForm = reactive<LoginForm>({
  username: '',
  password: '',
})

const validateUsername = (_: unknown, value: string, callback: (error?: Error) => void) => {
  if (!value.trim()) {
    callback(new Error('请输入账号'))
  } else {
    callback()
  }
}

const validatePassword = (_: unknown, value: string, callback: (error?: Error) => void) => {
  if (!value.trim()) {
    callback(new Error('请输入密码'))
  } else if (value.length < 6) {
    callback(new Error('密码长度不能小于6位'))
  } else {
    callback()
  }
}

const rules = reactive<FormRules<typeof loginForm>>({
  username: [{ validator: validateUsername, trigger: 'blur' }],
  password: [{ validator: validatePassword, trigger: 'blur' }],
})

const success = () => {
  ElNotification({
    title: 'Success',
    message: '登录成功',
    type: 'success',
  })
}
const error = () => {
  ElNotification({
    title: 'Error',
    message: '用户名密码错误',
    type: 'success',
  })
}
const router = useRouter()

const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate(async (valid) => {
    if (valid) {
      await $Login(loginForm).then(async (res: IResponse) => {
        if (res.code === 200 && res.msg === '登录成功') {
          success()
          const userStore = useUserStore()
          const user = await $GetUserinfo({ username: loginForm.username })
          userStore.setUser(user.data)
          // await new Promise((resolve) => setTimeout(resolve, 5000))
          router.push('/index/home')
        } else {
          error()
        }
      })
    } else {
      error()
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
</script>
<style scoped lang="scss">
.login {
  width: 100vw;
  height: 100vh;
  background: linear-gradient(135deg, #142334 0%, #6894c7 100%);
  display: flex;
  justify-content: center;
  align-items: center;

  .box {
    width: 400px;
    padding: 30px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    backdrop-filter: blur(5px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);

    h1 {
      text-align: center;
      color: white;
      margin-bottom: 24px;
      font-family: 'hotel';
      font-size: 24px;
      font-weight: 500;
    }
  }

  ::v-deep {
    .el-form-item__label {
      color: #fff;
    }

    .el-input__wrapper {
      background: rgba(255, 255, 255, 0.1);
      box-shadow: none;

      .el-input__inner {
        color: #fff;
      }
    }
  }
}
</style>
